import {
  Button,
  Col,
  Form,
  FormItem,
  Image,
  InputNumber,
  message,
  Modal,
  Row,
  Spin
} from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'

import qzyApi from '@/apis/qzyApi'
import { DrawActivityData, PrizeItem } from '@/apis/qzyType'
import { ProTableRef } from '@/components'
import { useBack } from '@/hooks'
import { formatDate } from '@/utils'

export default defineComponent({
  name: 'QzyLotteryDetail',
  setup() {
    const route = useRoute()
    const loading = ref(false)
    const data = ref({} as DrawActivityData)
    //碎片增加參數
    const modalNum = ref(0)
    const modalId = ref(0)
    const modalPrizeId = ref(0)
    const modalType = ref(0)
    const actData = ref('')
    const modalTitle = ref('')
    const visible = ref(false)
    const { handleCancel } = useBack('refreshQzylotteryList')
    function cancel() {
      handleCancel()
    }

    //碎片增加弹窗
    async function addSp(item, index) {
      visible.value = true
      let spName
      if (index === 1) {
        spName = '碎片1'
      } else if (index === 2) {
        spName = '碎片2'
      } else spName = '碎片3'
      const name = item.prizeName
      modalTitle.value = name + spName
      modalId.value = route.query.id as any
      modalPrizeId.value = item.id
      modalType.value = index
    }

    async function getDetail() {
      loading.value = true
      try {
        data.value = await qzyApi.qzyLotterylDetail({ id: route.query.id })

        data.value.prizeVos?.push({} as PrizeItem)
      } finally {
        let newPrizesList: any = []
        newPrizesList = data.value.prizeVos
        ;[
          newPrizesList[5],
          newPrizesList[3],
          newPrizesList[4],
          newPrizesList[7],
          newPrizesList[8]
        ] = [
          newPrizesList[3],
          newPrizesList[7],
          newPrizesList[8],
          newPrizesList[5],
          newPrizesList[4]
        ]
      }
      loading.value = false
    }
    async function handleAdd() {
      const id = route.query.id
      try {
        await qzyApi
          .addFragments({
            id: modalId.value,
            prizeId: modalPrizeId.value,
            num: modalNum.value,
            fragmentsType: modalType.value
          })
          .then(() => {
            message.success('碎片添加成功!'), (visible.value = false)
          })
      } finally {
        modalNum.value = 0
        getDetail()
      }
    }

    function Modalcancel() {
      modalNum.value = 0
    }
    getDetail()
    return {
      loading,
      actData,
      data,
      visible,
      modalTitle,
      modalNum,
      Modalcancel,
      handleAdd,
      getDetail,
      cancel,
      addSp
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form>
          <FormItem label="活动名称：">{this.data.activityName}</FormItem>
          <FormItem label="活动时间：">
            <span>{formatDate(this.data.startTime)}</span>~
            <span>{formatDate(this.data.endTime)}</span>
          </FormItem>
          <span>奖项：</span>
          <Row type="flex" gutter={[8, 8]}>
            {this.data.prizeVos?.map((item, index) => {
              const viewPrize = (
                <Col span={7}>
                  <div
                    style={{
                      width: '300px',
                      height: '500px',
                      border: ' 1px solid black',
                      display: 'flex',
                      justifyContent: 'center',
                      flexDirection: 'column'
                    }}
                  >
                    <FormItem
                      label="奖项名称"
                      style={{
                        width: '250px',
                        marginBottom: '20px',
                        marginLeft: '15px'
                      }}
                    >
                      <span style={{ marginLeft: '5px' }}>
                        {item.prizeName}
                      </span>
                    </FormItem>
                    <FormItem
                      label="类型"
                      style={{ marginBottom: '15px', marginLeft: '15px' }}
                    >
                      <span style={{ marginLeft: '35px' }}>
                        {item.prizeType === 1
                          ? '商品'
                          : item.prizeType === 2
                          ? '积分'
                          : item.prizeType === 3
                          ? '金豆'
                          : item.prizeType === 0
                          ? '谢谢参与'
                          : ''}
                      </span>
                    </FormItem>
                    <div v-show={item.prizeType === 1}>
                      <FormItem
                        style={{ marginBottom: '22px', marginLeft: '15px' }}
                      >
                        <div style={{ display: 'flex' }}>
                          <Image
                            style={{ width: '75px', height: '75px' }}
                            src={item.prizeUrl}
                          ></Image>
                          <span
                            style={{
                              marginRight: '15px',
                              marginTop: '7px',
                              marginLeft: '10px'
                            }}
                          >
                            {item.goodsName}
                          </span>
                        </div>
                        <span
                          style={{
                            position: 'absolute',
                            bottom: '0px',
                            left: '30%'
                          }}
                        >
                          库存：{item.stock}
                        </span>
                      </FormItem>
                      <FormItem
                        label="碎片1"
                        style={{ marginBottom: '0px', marginLeft: '15px' }}
                      >
                        <span style={{ marginLeft: '37px' }}>
                          {item.fragmentsFirst}
                        </span>
                        <Button
                          type="primary"
                          size="small"
                          style={{ marginLeft: '25px', width: '65px' }}
                          onClick={() => this.addSp(item, 1)}
                        >
                          增加
                        </Button>
                      </FormItem>
                      <FormItem
                        label="碎片2"
                        style={{ marginBottom: '0px', marginLeft: '15px' }}
                      >
                        <span style={{ marginLeft: '37px' }}>
                          {item.fragmentsSecond}
                        </span>
                        <Button
                          type="primary"
                          size="small"
                          style={{ marginLeft: '25px', width: '65px' }}
                          onClick={() => this.addSp(item, 2)}
                        >
                          增加
                        </Button>
                      </FormItem>
                      <FormItem label="碎片3" style={{ marginLeft: '15px' }}>
                        <span style={{ marginLeft: '37px' }}>
                          {item.fragmentsThird}
                        </span>
                        <Button
                          type="primary"
                          size="small"
                          style={{ marginLeft: '25px', width: '65px' }}
                          onClick={() => this.addSp(item, 3)}
                        >
                          增加
                        </Button>
                      </FormItem>
                      <FormItem
                        style={{ marginLeft: '15px', marginTop: '5px' }}
                      >
                        中奖概率：
                        <span style={{ marginLeft: '15px' }}>
                          {item.winningProbability}
                        </span>
                        %（0~100）
                      </FormItem>
                      <FormItem style={{ marginLeft: '15px' }}>
                        待兑换：
                        <span style={{ marginLeft: '27px' }}>
                          {item.unfinishedExchangeCount}
                        </span>
                      </FormItem>
                      <FormItem style={{ marginLeft: '15px' }}>
                        已兑换：
                        <span style={{ marginLeft: '27px' }}>
                          {item.finishExchangeCount}
                        </span>
                      </FormItem>
                    </div>
                    <div v-show={item.prizeType === 2 || item.prizeType === 3}>
                      <FormItem
                        label={
                          item.prizeType === 2
                            ? '积分'
                            : item.prizeType === 3
                            ? '金豆'
                            : ''
                        }
                        style={{ marginLeft: '15px' }}
                      >
                        <span style={{ marginLeft: '35px' }}>
                          {item.pointStart}~{item.pointEnd}
                        </span>
                      </FormItem>
                      <FormItem label="奖项图片" style={{ marginLeft: '15px' }}>
                        <Image
                          style={{ width: '75px', height: '75px' }}
                          src={item.prizeUrl}
                        ></Image>
                      </FormItem>
                      <FormItem
                        style={{ marginLeft: '15px', marginTop: '5px' }}
                      >
                        中奖概率：
                        <span style={{ marginLeft: '10px' }}>
                          {item.winningProbability}
                        </span>
                        %（0~100）
                      </FormItem>
                    </div>
                    <div v-show={item.prizeType === 0}>
                      <FormItem label="奖项图片" style={{ marginLeft: '15px' }}>
                        <Image
                          style={{ width: '75px', height: '75px' }}
                          src={item.prizeUrl}
                        ></Image>
                      </FormItem>
                    </div>
                  </div>
                </Col>
              )
              const viewEmpty = (
                <Col span={7}>
                  <div
                    style={{
                      width: '300px',
                      height: '500px'
                    }}
                  ></div>
                </Col>
              )
              return index == 4 ? viewEmpty : viewPrize
            })}

            <FormItem
              style={{
                marginLeft: '680px',
                marginTop: '40px',
                marginBottom: '60px'
              }}
            >
              <Button
                style={{ width: '300px', height: '45px' }}
                onClick={this.cancel}
              >
                返回
              </Button>
            </FormItem>
          </Row>
        </Form>
        <Modal
          title={this.modalTitle}
          v-model:visible={this.visible}
          width="400px"
          onOk={this.handleAdd}
          onCancel={this.Modalcancel}
        >
          碎片增加:
          <InputNumber
            centered={true}
            style={{ width: '150px', marginLeft: '15px' }}
            precision={0}
            v-model:value={this.modalNum}
          ></InputNumber>
        </Modal>
      </Spin>
    )
  }
})
